<template>
	<view class="carousel-container">
		<!-- Uniapp原生轮播组件 -->
		<swiper class="carousel-swiper" autoplay interval="3000" circular indicator-dots
			indicator-active-color="#ffb906" indicator-color="#ffffff">
			<swiper-item v-for="(item, index) in list" :key="index">
				<image :src="handleImgURL(item.img)" mode="aspectFill" class="carousel-img"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		baseUrl
	} from "@/utils/config.js"
	export default {
		name: "HomeCarousel",
		props: {
			list: {
				type: Array,
				default: () => [] // 默认空数组，避免报错
			}
		},
		created() {
			console.log(this.list)
		},
		methods: {
			handleImgURL(url) {
				if (url.includes("http")) {
					return url
				} else {
					return baseUrl + url
				}
			}
		}
	}
</script>

<style scoped>
	.carousel-container {
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 20rpx;
	}

	.carousel-swiper {
		width: 100%;
		height: 300rpx;
	}

	.carousel-img {
		width: 100%;
		height: 100%;
	}
</style>